<div id="Usuario">
    
</div>
<table>
    <tr>
        <td>Nombre:</td>
        <td><input type="text" id="nombre" size="20" class="uno"/></td>
    </tr>
    <tr>
        <td>Rut:</td>
        <td><input type="text" id="rut" size="20" class="uno"/>(sin puntos ni guión)</td>
    </tr>
    <tr>
        <td>Correo:</td>
        <td><input type="text" id="correo" size="20" class="uno"/></td>
    </tr>
    <tr>
        <td>Nickname:</td>
        <td><input type="text" id="nick" size="20" class="uno"/></td>
    </tr>
    <tr>
        <td>Clave:</td>
        <td><input type="password" id="clave2" size="20" class="uno"/></td>
    </tr>
    <tr>
        <td></td>
        <td><div id="msj2"></div></td>
    </tr>
    <tr>
        <td>Permiso:</td>
        <td><select id="permiso">
                <option value="0">Admin
                <option value="1">Normal
                <option value="2">User
            </select></td>
    </tr>
</table>
<div id="acordion" style="width:50%; float:left;">
    <h3><a href="#">Título 1</a></h3>
    <div id="primero" class="dos">
        <label>Hola Mundo!</label>
        <input type="text" id="fecha" disabled/><br>
        <button id="modal">Ventana Modal</button>
    </div>
    <h3><a href="#">Título 2</a></h3>
    <div id="segundo" class="dos">
        <label>Hola Mundo 2!</label>
    </div>
</div>
<div id="ventanaModal">
    <label>Hola Mundo!</label>
</div>
<div id="acordion2" style="width:49%;float:right;">
    <h3><a href="#">Título 1</a></h3>
    <div id="primero" class="dos">
        <label>Hola Mundo!</label>
    </div>
    <h3><a href="#">Título 2</a></h3>
    <div id="segundo" class="dos">
        <label>Hola Mundo 2!</label>
    </div>
</div>
<button id="guardar">Guardar</button>
<script>
    $("#modal").button().click(
        function(){
            $("#ventanaModal").dialog("open");
        }
    );
    $("#ventanaModal").dialog({
        autoOpen:false,
        modal:true,
        resizable:false,
        width: 200,
        height:300}
    );
    $("#fecha").datepicker({
        showOn: "button",
        buttonImage: "imagenes/calendar.gif",
        buttonImageOnly: true,
        dateFormat: 'dd/mm/yy'
    });
    $("#acordion").accordion({collapsible:true});
    $("#acordion2").accordion({collapsible:true});
    $(".dos").css("height","auto");
    //$("#primero").css("height","auto");
    //$("#segundo").css("height","auto");
    $("#guardar").button().click(
        function(){
            $.post(
                base_url+"welcome/guardaRegistro",
                {
                    nombre:$("#nombre").val(),
                    rut:$("#rut").val(),
                    correo:$("#correo").val(),
                    nickname:$("#nick").val(),
                    clave:$("#clave2").val(),
                    permiso:$("#permiso").val()
                },
                function(data){
                    $("#msj2").html("<p>"+data.msj+"</p>");
                },
                'json'
            );
        }
    );
</script>